import React, { useRef, useState, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { useLoader, useFrame } from '@react-three/fiber'
// @ts-expect-error 忽略类型错误
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// @ts-expect-error 忽略类型错误
import { AnimationMixer, AnimationClip, AmbientLight } from 'three'
import { OrbitControls } from '@react-three/drei'

// 为 AnimatedModel 组件的 props 添加类型
interface AnimatedModelProps {
  modelPath: string
  scale?: [number, number, number] // 添加可选的 scale 属性
  position?: [number, number, number] // 添加可选的 scale 属性
}

const AnimatedModel: React.FC<AnimatedModelProps> = ({
  modelPath,
  scale = [1, 1, 1],
  position = [0, 0, 0]
}) => {
  // 加载 GLTF 模型及动画数据
  const gltf = useLoader(GLTFLoader, modelPath)
  // 使用 useRef 存储 AnimationMixer
  const mixer = useRef<AnimationMixer>(new AnimationMixer(gltf.scene))

  // 使用 useState 存储动画数据
  const [animations] = useState<AnimationClip[]>(gltf.animations)

  // 灯光 环境光
  const light = new AmbientLight(0x000000, 1)
  gltf.scene.add(light)

  // 使用 useEffect 设置动画播放
  useEffect(() => {
    if (animations && animations.length > 0) {
      animations.forEach(cilp => {
        mixer.current.clipAction(cilp).play()
      })
    }
  }, [animations])

  // 在每一帧更新动画
  useFrame((state, delta) => mixer.current.update(delta))

  // 设置模型的缩放
  gltf.scene.scale.set(...scale)
  gltf.scene.position.set(...position)
  return <primitive object={gltf.scene} />
}

const App: React.FC = () => {
  return (
    <>
      <Canvas>
        <ambientLight />
        <directionalLight position={[0, -3, 0]} />
        {/* 设置人物模型的缩放比例，例如：[0.5, 0.5, 0.5] */}
        {/* 使用 AnimatedModel 组件加载模型，并设置缩放比例 */}
        <AnimatedModel
          modelPath="/ff.glb"
          position={[0, -3, 0]}
          scale={[3, 3, 3]}
        />
        {/* 控制视角 */}
        <OrbitControls />
      </Canvas>
    </>
  )
}

export default App
